<template>
  <div
    id="luckysheetContainer"
    style="width: calc(100vw - 200px); height: 100vh"
  ></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const Luckysheet = window["luckysheet"];

defineOptions({
  name: "MyLuckysheet",
});

const props = defineProps({
  sheetParams: {},
});

const loadUrl = [
  //status为1的sheet页，重点是需要提供初始化的数据celldata
  {
    name: "Cell",
    index: "sheet_01",
    order: 0,
    status: 1,
    celldata: [
      { r: 0, c: 0, v: { v: 1, m: "1", ct: { fa: "General", t: "n" } } },
    ],
  },
  //其他status为0的sheet页，无需提供celldata，只需要配置项即可
  {
    name: "Data",
    index: "sheet_02",
    order: 1,
    status: 0,
  },
  {
    name: "Picture",
    index: "sheet_03",
    order: 2,
    status: 0,
  },
];

// 假设从后台获取表格数据

// 表格创建选项
const options = {
  container: "luckysheetContainer", // luckysheet为容器id
  lang: "zh", // 设定表格语言
  title: "工作簿", // 设定表格名称
  // forceCalculation: true,
  // index: "0",
  // status: "1",
  // order: "0",
  // hide: "0",
  // loadUrl: JSON.stringify(loadUrl),
  column: 300, // 列数
  row: 100, // 行数
  showtoolbar: true, // 工具栏
  showinfobar: true, // 信息栏
  showsheetbar: true, // 底部sheet页
  sheetFormulaBar: true, // 是否显示公式栏
  showsheetbarConfig: {}, // 自定义底部sheet页
  sheetRightClickConfig: {}, //自定义底部sheet页右击菜单
  showtoolbarConfig: {}, // 自定义配置工具栏
  cellRightClickConfig: {}, // 右键配置
  data: [
    {
      name: "工作表1", //工作表名称
      color: "red", //工作表(工作表名称底部边框线)颜色
      index: 0, //工作表索引(新增一个工作表时该值是一个随机字符串)
      status: 1, //激活状态
      order: 0, //工作表的下标
      hide: 0, //是否隐藏
      row: 36, //行数
      column: 50, //列数
      defaultRowHeight: 28, //自定义行高,单位px
      defaultColWidth: 100, //自定义列宽,单位px
      celldata: [
        {
          r: 2,
          c: 1,
          v: {
            // f: "=MAX(A7:A9)",
            // ct: {
            //   fa: "General",
            //   t: "n",
            // },
            v: "区域名称",
            m: "100",
          },
        },
        {
          r: 2,
          c: 2,
          v: {
            // f: "=SUM(A2)",
            // bg: "#fff000",
            v: "超30天未清单",
            m: "12",
          },
        },
        {
          r: 2,
          c: 4,
          v: ' "三公" 经费',
        },
        {
          r: 3,
          c: 2,
          v: "笔数",
        },
        {
          r: 3,
          c: 3,
          v: "金额",
        },
        {
          r: 3,
          c: 4,
          v: "小计",
        },
        {
          r: 3,
          c: 5,
          v: "因公出国",
        },
        {
          r: 3,
          c: 6,
          v: "公务接待",
        },
        {
          r: 3,
          c: 7,
          v: "公务用车",
        },
      ], //初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
      config: {
        merge: {
          "0_0": {
            r: 0, //行数
            c: 0, //列数
            rs: 2, //合并的行数
            cs: 8, //合并的列数
          },
          "2_0": {
            r: 2, //行数
            c: 0, //列数
            rs: 2, //合并的行数
            cs: 1, //合并的列数
          },
          "2_1": {
            r: 2, //行数
            c: 1, //列数
            rs: 2, //合并的行数
            cs: 1, //合并的列数
          },
          "2_2": {
            r: 2, //行数
            c: 2, //列数
            rs: 1, //合并的行数
            cs: 2, //合并的列数
          },
          "2_4": {
            r: 2, //行数
            c: 4, //列数
            rs: 1, //合并的行数
            cs: 4, //合并的列数
          },
        }, //合并单元格
        rowlen: {
          2: 50,
        }, //表格行高
        columnlen: {}, //表格列宽
        rowhidden: {}, //隐藏行
        colhidden: {}, //隐藏列
        borderInfo: [
          {
            rangeType: "range",
            borderType: "border-all",
            style: "3",
            color: "#0000ff",
            range: [
              {
                row: [0, 8],
                column: [0, 7],
              },
            ],
          },
        ], //边框
        authority: {}, //工作表保护
      },
      scrollLeft: 0, //左右滚动条位置
      scrollTop: 0, //上下滚动条位置
      luckysheet_select_save: [], //选中的区域
      calcChain: [], //公式链
      isPivotTable: false, //是否数据透视表
      pivotTable: {}, //数据透视表设置
      filter_select: {}, //筛选范围
      filter: null, //筛选配置
      luckysheet_alternateformat_save: [], //交替颜色
      luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
      luckysheet_conditionformat_save: {}, //条件格式
      frozen: {}, //冻结行列配置
      chart: [], //图表配置
      zoomRatio: 1, // 缩放比例
      image: [], //图片
      showGridLines: 1, //是否显示网格线
      dataVerification: {}, //数据验证配置
      data: {
        v: 233, //内容的原始值为 233
        m: 233, //内容的显示值为 233
      },
    },
    {
      name: "Sheet2",
      color: "",
      index: 1,
      status: 0,
      order: 1,
      celldata: [],
      config: {},
    },
    {
      name: "Sheet3",
      color: "",
      index: 2,
      status: 0,
      order: 2,
      celldata: [],
      config: {},
    },
  ],
};

onMounted(() => {
  console.log(666, options.container);
  Luckysheet.create(options);
});
</script>